<!--
 * @Author: 陆成杰
 * @Date: 2022-06-23 14:22:33
 * @LastEditTime: 2022-06-29 11:08:04
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/program-manager/PublishNotice.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <div class="header">
      <div style="display: flex">
        <div class="header-title">公告状态:</div>
        <div class="header-select">
          <select @change="chooseStatus($event)">
            <option
              :value="item"
              v-for="(item, index) in state.notice"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
        </div>
      </div>
      <div class="header-button">
        <button class="header-button-item1">重 置</button>
        <button class="header-button-item2">查 询</button>
      </div>
    </div>

    <div class="content">
      <div style="display: flex; justify-content: space-between">
        <div class="content-header">
          <div class="content-header-img">
            <img src="../../assets/material/all.png" alt="" />
            <div
              style="
                margin-top: 6px;
                color: darkgrey;
                font-size: 14px;
                margin-left: 5px;
              "
            >
              全部
            </div>
          </div>
        </div>
        <div class="content-btn">
          <div class="content-btn-item2"><button>批量删除</button></div>
          <div class="content-btn-item1"><button @click="createNotice">创建公告</button></div>
        </div>
      </div>

      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          size="default"
          class="el-table"
          :header-cell-style="{ background: 'rgb(35, 39, 56)' }"
          :cell-style="{ background: 'rgb(41, 45, 62)', color: '#fff' }"
        >
          <el-table-column prop="num" label="" width="50" />
          <el-table-column prop="content" label="公告内容" width="420">
          </el-table-column>
          <el-table-column prop="date" label="播放时间" width="" />
          <el-table-column prop="status" label="公告状态" width="100" />
          <el-table-column prop="auther" label="作者" width="100" />
          <el-table-column prop="created" label="创建时间时间" width="130" />
          <el-table-column prop="do" label="操作" width="200">
            <template #default="scope">
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                详情
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                编辑
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                复制
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                下线
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                删除
              </button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router"

const router = useRouter()
const tableData = [
  {
    num: 1,
    name: "Finish this system",
    status: "待审核",
    date: "2022-6-24",
    people: "Bob",
  },
];
const state = reactive({
  notice: ['全部','待发布','发布中','播放中','部分成功','发布失败','已结束'],
})

const createNotice = () => {
  router.replace('/notice')
}
</script>

<style lang="less" scoped>
.header {
  width: 99%;
  height: 80px;
  background-color: rgb(41, 45, 62);
  margin-left: 0.5%;
  display: flex;
  justify-content: space-between;
  &-title {
    line-height: 80px;
    color: #fff;
    margin-left: 25px;
    font-size: 14px;
  }
  &-input input {
    width: 180px;
    height: 25px;
    margin-top: 28px;
    margin-left: 10px;
    background-color: rgb(35, 39, 56);
    border: none;
    color: #fff;
    padding-left: 10px;
    outline-color: rgb(24, 144, 255);
    background-image: url(../../assets/program/search.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 170px;
  }
  &-select select{
    width: 250px;
    height: 28px;
    margin-top: 25px;
    margin-left: 10px;
    background-color: rgb(35, 39, 56);
    border: none;
    color: #fff;
    padding-left: 10px;
    outline-color: rgb(24, 144, 255);
  }
  &-button {
    margin-right: 30px;
    margin-top: 22px;
    &-item1 {
      width: 70px;
      height: 35px;
      border: none;
      border-radius: 1px;
      margin-left: 10px;
    }
    &-item2 {
      width: 70px;
      height: 35px;
      margin-left: 10px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
    }
  }
}
.content {
  width: 99%;
  margin-left: 0.5%;
  height: 585px;
  background-color: rgb(41, 45, 62);
  margin-top: 20px;

  // color: darkgrey;

  &-header {
    &-img {
      display: flex;
      padding: 25px;
    }
  }
  &-btn {
    display: flex;
    margin-top: 25px;
    margin-right: 30px;
    &-item1 button {
      width: 80px;
      height: 35px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
      margin-left: 10px;
    }
    &-item2 button {
      width: 80px;
      height: 35px;
      color: darkgray;
      border: none;
      border-radius: 1px;
      margin-left: 20px;
    }
    &-img1 img,
    &-img2 img {
      width: 20px;
      height: 20px;
    }
    &-img1,
    &-img2 {
      margin-left: 20px;
      margin-top: 6px;
    }
  }
}
.btns {
  border: none;
  background: none;
  color: rgba(0, 98, 255, 0.83);
  font-size: 14px;
}
</style>